<template>
  <div class="super-admin">
    <div class="page-header">
      <h1>超级管理员控制台</h1>
      <p>欢迎回来，{{ username }}！这里是系统管理中心</p>
    </div>

    <!-- 功能卡片 -->
    <div class="admin-cards">
      <div class="admin-card" @click="goToPage('UserManage')">
        <div class="card-icon user-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
          </svg>
        </div>
        <h3>用户管理</h3>
        <p>管理系统用户，包括启用、禁用、删除和角色分配</p>
        <div class="card-stats">
          <span class="stat-item">
            <span class="stat-number">{{ userStats.total }}</span>
            <span class="stat-label">总用户数</span>
          </span>
          <span class="stat-item">
            <span class="stat-number">{{ userStats.active }}</span>
            <span class="stat-label">活跃用户</span>
          </span>
        </div>
      </div>

      <div class="admin-card" @click="goToPage('RoleManage')">
        <div class="card-icon role-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
          </svg>
        </div>
        <h3>角色管理</h3>
        <p>管理系统角色和权限分配</p>
        <div class="card-stats">
          <span class="stat-item">
            <span class="stat-number">{{ roleStats.total }}</span>
            <span class="stat-label">角色数量</span>
          </span>
          <span class="stat-item">
            <span class="stat-number">{{ roleStats.system }}</span>
            <span class="stat-label">系统角色</span>
          </span>
        </div>
      </div>

      <div class="admin-card" @click="goToPage('PermissionManage')">
        <div class="card-icon permission-icon">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
          </svg>
        </div>
        <h3>权限管理</h3>
        <p>管理系统中的所有权限</p>
        <div class="card-stats">
          <span class="stat-item">
            <span class="stat-number">{{ permissionStats.total }}</span>
            <span class="stat-label">权限数量</span>
          </span>
          <span class="stat-item">
            <span class="stat-number">{{ permissionStats.active }}</span>
            <span class="stat-label">启用权限</span>
          </span>
        </div>
      </div>
    </div>

    <!-- 快速操作 -->
    <div class="quick-actions">
      <h2>快速操作</h2>
      <div class="action-buttons">
        <button @click="goToPage('UserManage')" class="action-btn">
          <span class="btn-icon">👤</span>
          <span>查看用户</span>
        </button>
        <button @click="goToPage('RoleManage')" class="action-btn">
          <span class="btn-icon">🎭</span>
          <span>管理角色</span>
        </button>
        <button @click="goToPage('PermissionManage')" class="action-btn">
          <span class="btn-icon">🔐</span>
          <span>管理权限</span>
        </button>
        <button @click="refreshStats" class="action-btn">
          <span class="btn-icon">🔄</span>
          <span>刷新数据</span>
        </button>
      </div>
    </div>

    <!-- 系统信息 -->
    <div class="system-info">
      <h2>系统信息</h2>
      <div class="info-grid">
        <div class="info-item">
          <span class="info-label">版本号</span>
          <span class="info-value">v1.0.0</span>
        </div>
        <div class="info-item">
          <span class="info-label">登录用户</span>
          <span class="info-value">{{ username }}</span>
        </div>
        <div class="info-item">
          <span class="info-label">角色</span>
          <span class="info-value">超级管理员</span>
        </div>
        <div class="info-item">
          <span class="info-label">上次登录</span>
          <span class="info-value">{{ formatDate(new Date()) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/user'
import { ElMessage } from 'element-plus'
import * as adminAPI from '@/api/admin'

const router = useRouter()
const userStore = useUserStore()

const username = computed(() => userStore.userInfo.username || '管理员')

const userStats = ref({
  total: 0,
  active: 0
})

const roleStats = ref({
  total: 0,
  system: 0
})

const permissionStats = ref({
  total: 0,
  active: 0
})

// 加载统计数据
const loadStats = async () => {
  try {
    // 加载用户统计
    const userRes = await adminAPI.getAllUsers()
    if (userRes.code === 200) {
      const users = userRes.data || []
      userStats.value.total = users.length
      userStats.value.active = users.filter(u => u.status === 1).length
    }

    // 加载角色统计
    const roleRes = await adminAPI.getAllRoles()
    if (roleRes.code === 200) {
      const roles = roleRes.data || []
      roleStats.value.total = roles.length
      roleStats.value.system = roles.filter(r => 
        ['SUPER_ADMIN', 'ADMIN', 'USER'].includes(r.roleCode)
      ).length
    }

    // 加载权限统计
    const permRes = await adminAPI.getAllPermissions()
    if (permRes.code === 200) {
      const permissions = permRes.data || []
      permissionStats.value.total = permissions.length
      permissionStats.value.active = permissions.filter(p => p.status === 1).length
    }
  } catch (error) {
    console.error('加载统计数据失败', error)
  }
}

// 跳转页面
const goToPage = (pageName) => {
  router.push({ name: pageName })
}

// 刷新统计数据
const refreshStats = () => {
  loadStats()
  ElMessage.success('数据已刷新')
}

// 格式化日期
const formatDate = (date) => {
  return date.toLocaleString('zh-CN')
}

onMounted(() => {
  loadStats()
})
</script>

<style scoped>
.super-admin {
  padding: 20px;
  background: #f5f5f5;
  min-height: calc(100vh - 60px);
}

.page-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 40px 30px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.page-header h1 {
  margin: 0 0 10px 0;
  font-size: 32px;
  font-weight: 700;
}

.page-header p {
  margin: 0;
  font-size: 16px;
  opacity: 0.9;
}

.admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.admin-card {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: all 0.3s;
}

.admin-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

.card-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.card-icon svg {
  width: 32px;
  height: 32px;
}

.user-icon {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.role-icon {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.permission-icon {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.admin-card h3 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 20px;
}

.admin-card p {
  margin: 0 0 20px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.6;
}

.card-stats {
  display: flex;
  gap: 20px;
  padding-top: 15px;
  border-top: 1px solid #eee;
}

.stat-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.stat-number {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
}

.stat-label {
  font-size: 12px;
  color: #999;
}

.quick-actions {
  background: white;
  padding: 25px;
  border-radius: 12px;
  margin-bottom: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-actions h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 15px;
}

.action-btn {
  padding: 15px;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #333;
  transition: all 0.3s;
}

.action-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.btn-icon {
  font-size: 28px;
}

.system-info {
  background: white;
  padding: 25px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.system-info h2 {
  margin: 0 0 20px 0;
  color: #333;
  font-size: 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 15px;
  background: #f8f9fa;
  border-radius: 8px;
}

.info-label {
  font-size: 12px;
  color: #999;
  font-weight: 500;
}

.info-value {
  font-size: 16px;
  color: #333;
  font-weight: 600;
}
</style>

